<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-01-20 19:05:22
-->
<template>
  <el-card class="el-card-bottom-top">
    <template #header>
      <DileTooltip
        :content="$t(`page.factoryManageArr.dataKeyArr.${dataMap.type}`)"
      />
      <el-date-picker
        v-model="dateValue"
        unlink-panels
        type="daterange"
        :start-placeholder="$t('common.statrDate')"
        :end-placeholder="$t('common.endDate')"
        :shortcuts="Dile_Methods.getShortcuts()"
        size="small"
        @change="handleRefresh"
      />
      <el-button
        :icon="Download"
        circle
        size="small"
        @click="
          emit(`exportData`, {
            type: dataMap.type.replace(`${dataType}_`, ``),
            dateValue,
          })
        "
      />
    </template>
    <DileTable ref="dileTableRef">
      <template #preColumn>
        <vxe-column
          v-for="column in tableColumnArr"
          :field="column.field"
          :width="column.width || ''"
          :formatter="column.formatter"
          :title="$t(column.title) + (!!column.unit ? `(${column.unit})` : ``)"
        />
      </template>
    </DileTable>
    <div class="factory-statistic">
      <span>{{ describe }}</span>
      <CountTo
        :endVal="Number(dataMap.sum) || 0"
        :decimals="!!isDecimals ? 1 : 0"
      />
      <span v-if="!!isDecimals">%</span>
    </div>
    <div
      v-if="dataMap.type == factoryDataKeyEnum.cost_FORMING"
      class="factory-statistic"
    >
      <span>{{
        `${$t(`page.factoryManageArr.statisticArr.shapingEquipUseRate`)}:`
      }}</span>
      <CountTo
        :endVal="Number(dataMap.usageRate) || 0"
        :decimals="!!isDecimals ? 1 : 0"
      />
      <span v-if="!!isDecimals">%</span>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { propsParam_Inf } from "@/components/dile-table/index.type";
import { ref, reactive, onMounted, provide, computed, watch } from "vue";
import {
  factoryDataKeyEnum,
  factoryStatisticMap,
} from "@typings/factoryManage/index.type";
import { CountTo } from "vue3-count-to";
import { object_Inf } from "@/utils/typings/index.type";
import { useI18n } from "vue-i18n";
import { Download } from "@element-plus/icons-vue";
import FactoryDataTypeListUtils from "./utils";
import DileTable from "@/components/dile-table/index.vue";
import DileTooltip from "@/components/dile-tooltip/index.vue";
import Dile_Methods from "@/utils/methods";
const emit = defineEmits(["refresh", "exportData"]);
const props = defineProps({
  //数据类型
  dataType: {
    type: String,
    requited: true,
    default: "",
  },
  dataMap: {
    type: Object,
    requited: true,
    default: {},
  },
  height: {
    type: String,
    requited: false,
    default: "25rem",
  },
  isPagination: {
    type: Boolean,
    requited: false,
    default: false,
  },
});
/**
 * @Author: xzh
 * @Descripttion:i18n实例
 * @Param:
 */
let { t } = useI18n();
/**
 * @Author: xzh
 * @Descripttion: 表格实例
 * @Param:
 */
let dileTableRef = ref<any>(null);
/**
 * @Author: xzh
 * @Descripttion: 日期值
 * @Param:
 */
let dateValue = ref<any>([
  Dile_Methods.getDefaultToDay(),
  Dile_Methods.getDefaultToDay(),
]);
/**
 * @Author: xzh
 * @Descripttion: 判断是否为小数
 * @Param:
 * @param {*} computed
 */
let isDecimals = computed(() => {
  let { type } = props.dataMap;
  return [
    factoryDataKeyEnum.quality_AOI,
    factoryDataKeyEnum.cost_AOI,
    factoryDataKeyEnum.cost_FORMING,
    factoryDataKeyEnum.cost_TRIM,
  ].includes(type);
});
/**
 * @Author: xzh
 * @Descripttion: 描述
 * @Param:
 */
let describe = computed(() => {
  let { dataType, dataMap } = props,
    pre: string = "";
  let content = t(
    `page.factoryManageArr.statisticArr.${factoryStatisticMap[dataType]}`
  );
  switch (dataMap.type) {
    case factoryDataKeyEnum.cost_TRIM:
    case factoryDataKeyEnum.delivery_TRIM:
      //切箍边机稼动率、切箍边机产出数
      pre = t(`page.factoryManageArr.statisticArr.cutEdge`);
      break;
    case factoryDataKeyEnum.cost_FORMING:
    case factoryDataKeyEnum.delivery_FORMING:
      //成型机稼动率、成型机产出数
      pre = t(`page.factoryManageArr.statisticArr.shaping`);
      break;
    case factoryDataKeyEnum.cost_AOI:
    case factoryDataKeyEnum.quality_AOI:
      //AOI/CCD稼动率、AOI/CCD良率
      pre = t(`page.factoryManageArr.statisticArr.AOI`);
      break;
    case factoryDataKeyEnum.delivery_STACKING:
      pre = t(`page.factoryManageArr.statisticArr.stacker`);
      break;
    case factoryDataKeyEnum.delivery_AOI:
      //AOI/CCD检验数
      pre = t(`page.factoryManageArr.statisticArr.AOIDefectsNum`);
      content = "";
      break;
  }

  return `${pre}${content}:`;
});
/**
 * @Author: xzh
 * @Descripttion: 获取表格列
 * @Param:
 * @param {*} computed
 */
let tableColumnArr = computed(() => {
  let { dataType, dataMap } = props;
  return FactoryDataTypeListUtils.tableColumnMap[dataType].filter(
    (x: object_Inf) =>
      !(
        (FactoryDataTypeListUtils.factoryTypeColumnFilter[dataType] || {})[
          dataMap.type
        ] || []
      ).includes(x.field)
  );
});

/**
 * @Author: xzh
 * @Descripttion: 初始化
 * @Param:
 */
onMounted(() => {
  watch(
    () => props.dataMap.dataArr,
    () => {
      initTableData();
    },
    { immediate: true, deep: true }
  );
});

/**
 * @Author: xzh
 * @Descripttion: 加载列表数据
 * @Param:
 */
let initTableData = async (coverParam: object_Inf = {}) => {
  let { dataArr } = props.dataMap || {};
  Object.assign(propsParam, {
    tableData: dataArr,
    loading: false,
    ...coverParam,
  });
};
/**
 * @Author: xzh
 * @Descripttion: 刷新事件
 * @Param:
 */
let handleRefresh = () => {
  let { dataType, dataMap } = props;
  //触发回调
  emit("refresh", {
    dateValue: dateValue.value,
    type: dataMap.type.replace(`${dataType}_`, ""),
  });
};
/**
 * @Author: xzh
 * @Descripttion: 表格参数
 * @Param:
 */
let propsParam = reactive<propsParam_Inf>({
  loading: false,
  bottomUp: true,
  isPagination: props.isPagination,
  tableData: [],
  maxHeight: 400,
  emitEvents: {
    refreshTable: initTableData,
  },
});
provide("propsParam", propsParam);

defineExpose({
  initTableData,
  getTableRef: () => dileTableRef.value,
});
</script>
<style lang="scss" scoped>
:deep(.el-card__header) {
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
  > .el-date-editor {
    flex: 13rem 0 0;
  }
  > span {
    height: 1.5rem;
  }
}
:deep(.el-card__body) {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
</style>
